<template>
	<view class="category-components-wrapper">
		<view class="category-item-list" :id="`categoryNode${index +1}`" :ref="`categoryNode${index +1}`" v-for="(item, index) of categoryList" :key="item.id">
			<view class="category-item-title fz28 flex-c" @click="toSearch(item.id)">
				<view>{{ item.categoryName }}</view>
				<view class="flex-c" style="transform: translateY(2rpx);"><uni-icons type="forward" size="15" color="#666"></uni-icons></view>
			</view>
			<view class="category-item-content flex-c" v-if="item.children && item.children.length">
				<view class="category-item-level-two" v-for="(c, i) of item.children" :key="c.id" :class="[(i+1) % 3 === 0 ? 'clear-m' : '']" @click="toSearch(c.id)">
					<image v-if="c.icon" class="level-two-img" :src="c.icon" mode=""></image>
					<image v-else class="level-two-img" style="filter: gray;filter: grayscale(100%); opacity: 0.6;" src="/static/images/logo1024_1024@2x.png" mode=""></image>
					<view class="category-title fz26 flex-c-c">
						{{ c.categoryName }}
					</view>
				</view>
			</view>
			<view class="fz24 color999 txt-center" v-else>
				该分类暂无商品
			</view>
		</view>
		 		
	</view>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue'  

import type { IShopCategory } from '@/types'

export default defineComponent({
	props: {
		categoryList: {
			type: Array,
			default: () => ([])
		}
	},
	setup(_, ctx) {
		// const categoryNode1 = ref(null)
		// const categoryNode2 = ref(null)
		// const categoryNode3 = ref(null)
		// const categoryNode4 = ref(null)
		// const categoryNode5 = ref(null)
		
		// const state = reactive({
			
		// })
		
		const toSearch = (id: number) => {
			ctx.emit('categoryTap', id)
		}
		
		return {
			toSearch
		}
	}
})
</script>

<style lang="scss" scoped>
.category-components-wrapper{
	.category-item-list{
		margin-bottom: 40rpx;
		.category-item-title{
			padding-bottom: 24rpx;
			font-weight: 700;
		}
		.category-item-content{
			flex-wrap: wrap;
		}
		
		.level-two-img{
			width: 120rpx;
			height: 120rpx; 
			border-radius: 16rpx;
		}
		.category-item-level-two{
			margin-right: 56rpx;
			margin-bottom: 24rpx;
		}
		.clear-m{
			margin-right: 0rpx !important;
		}
	}
}
</style>